<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="telephone=no" name="format-detection" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.js"></script>
<script type="text/javascript" src="js/exif.js"></script>
<title>测试H5拍照</title>
</head>
<body>
	<input type="file" id="fileElem" multiple accept="image/*"
		onchange="handleFiles(this)" hidden capture="camera" name="file">
	<div style="width: 200px; height: 200px;" onclick="photo();"
		id="photo-div">随手拍</div>
	<div id="fileList" style="width: 200px; height: 200px;" hidden
		onclick="photo();"></div>
	<input type="button" value="上传" onclick="upload();">

	<script>
	
		$(function() {
			getLocation();
		})
		function getLocation() {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showPosition,
						showError);
			} else {
				alert("浏览器不支持地理定位。");
			}
		}

		function showError(error) {
			switch (error.code) {
			case error.PERMISSION_DENIED:
				alert("定位失败,用户拒绝请求地理定位");
				break;
			case error.POSITION_UNAVAILABLE:
				alert("定位失败,位置信息是不可用");
				break;
			case error.TIMEOUT:
				alert("定位失败,请求获取用户位置超时");
				break;
			case error.UNKNOWN_ERROR:
				alert("定位失败,定位系统失效");
				break;
			}
		}

		function showPosition(position) {
			var latlon = position.coords.latitude + ','
					+ position.coords.longitude;

			//baidu 
			var url = 'http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location='+latlon+'&output=json&pois=0'; 
			$.ajax({
				type : "GET",
				dataType : "jsonp",
				url : url,
				beforeSend : function() {
					$("#baidu_geo").html('正在定位...');
				},
				success : function(json) {
					if (json.status == 0) {
						alert(json.result.formatted_address);
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert(latlon + "地址位置获取失败");
				}
			});
		}

		window.URL = window.URL || window.webkitURL;
		var fileElem = document.getElementById("fileElem"), fileList = document
				.getElementById("fileList");
		function upload() {
			var form = $("<form></form>");
			form.append($("#fileElem"));
			var formData = new FormData(form[0]);
			$.ajax({
				url : "uploadFile",
				type : 'POST',
				data : formData,
				async : false,
				cache : false,
				contentType : false,
				processData : false,
				dataType : "text",
				success : function(returndata) {
					alert("图片上传成功");
					window.location.href = returndata;
				},
				error : function(returndata) {
					alert("上传图片出错");
				}
			});
		}
		function photo() {
			$("#fileElem").click();
			$("#fileList").show();
			$("#photo-div").hide();
		}
		function handleFiles(obj) {
			var files = obj.files, img = new Image();
			$("#fileList").empty();
			if (window.URL) {
				//File API
				//alert(files[0].name + "," + files[0].size + " bytes");
				img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
				img.width = 200;
				img.onload = function(e) {
					window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
					getPhotoOrientation(files[0],img);
				}
			} else if (window.FileReader) {
				//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
				var reader = new FileReader();
				reader.readAsDataURL(files[0]);
				reader.onload = function(e) {
					alert(files[0].name + "," + e.total + " bytes");
					img.src = this.result;
					img.width = 200;
					fileList.appendChild(img);
				}
			} else {
				//ie
				obj.select();
				obj.blur();
				var nfile = document.selection.createRange().text;
				document.selection.empty();
				img.src = nfile;
				img.width = 200;
				img.onload = function() {
					alert(nfile + "," + img.fileSize + " bytes");
				}
				fileList.appendChild(img);
			}
		}

		function getPhotoOrientation(file,img) {
			EXIF.getData(file, function() {
				orient = EXIF.getTag(this, 'Orientation');
				console.log(orient);
				if(orient != null&& orient != "" && orient != 1){  
                    switch(orient){  
                        case 6://需要顺时针（向左）90度旋转  
                        	$(img).rotate(90);
                            break;  
                        case 8://需要逆时针（向右）90度旋转  
                        	$(img).rotate(-90);
                            break;  
                        case 3://需要180度旋转  
                        	$(img).rotate(180);
                            break;  
                    }         
                }
				fileList.appendChild(img);
			}); 
		}
		
	</script>
</body>
</html>